<template>
	<view class="dx-body">
		<dx-table ref="table" :header="tableHeader" :tableParams="tableParams"></dx-table>
		<!--  -->
		<el-popover width="50%" ref="popoverRef" trigger="click" virtual-triggering :virtual-ref="buttonRef">
			<el-tag class="mr-5px mb-5px" v-for="val in permissionList" :key="val">{{ val }}</el-tag>
		</el-popover>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const tableHeader = reactive({
	tips: '角色管理',
});
const buttonRef = ref();
const popoverRef = ref();
const permissionList = ref([]);
const tableParams = reactive({
	columnConfig: {
		resizable: true,
	},
	rowConfig: {
		isCurrent: false,
		isHover: true,
	},
	showOverflow: 'tooltip',
	urls: {
		index: 'role/index',
		add: 'role/add',
		edit: 'role/edit',
		del: 'role/del',
		multi: 'role/multi',
	},
	columns: [
		{ type: 'checkbox', width: '60px', operator: false },
		{ type: 'seq', field: 'seq', label: '序号', width: '60px', operator: false },
		{
			label: '角色名称',
			field: 'role_name',
			minWidth: '100px',
			rules: [
				{
					required: true,
					message: '角色名称不能为空',
				},
			],
		},
		{
			label: '角色标识',
			field: 'role_id',
			minWidth: '100px',
			rules: [
				{
					required: true,
					message: '角色标识不能为空',
				},
			],
		},
		{
			label: '角色权限',
			field: 'permission',
			operator: false,
			minWidth: '120px',
			component: {
				name: 'dx-tree-check',
				props: {
					url: 'permission/list',
					nodeKey: 'permission_id',
					props: {
						label: 'permission_name',
					},
				},
			},
			render: (h: any, row: any) => {
				return h(
					ElButton,
					{
						type: 'primary',
						text: true,
						// 鼠标移入事件
						onMouseenter: (el: any) => {
							permissionList.value = row.permission;
							popoverRef.value.hide();
							setTimeout(() => (buttonRef.value = el.target), 500);
						},
					},
					() => '查看权限'
				);
			},
		},
		{
			label: '备注',
			field: 'comment',
			minWidth: '150px',
			component: {
				name: 'el-input',
				props: {
					type: 'textarea',
					placeholder: '请输入备注',
				},
			},
		},
		{
			label: '创建时间',
			field: 'create_date',
			form: false,
			width: '180px',
			formatter: 'dxFormatDate',
		},
		{
			type: 'operate',
			field: 'operate',
			label: '操作',
			width: '120px',
			fixed: 'right',
			operator: false,
			buttons: ['edit', 'del'],
			permission: ['dx-func-admin/role/edit', 'dx-func-admin/role/del'],
		},
	],
});

const table = ref();
onLoad(() => {
	nextTick(() => {
		// 加载表单数据
		table.value.getTableList();
	});
});
</script>

<style lang="scss"></style>
